<template>
  <div class="fedbackContent">
    <!-- 触发弹窗的按钮 -->
    <el-button type="warning" @click="showFeedbackForm">设置字体</el-button>
    <!-- 弹窗 -->
    <a-modal
      v-model:visible="popupVisible"
      title="试卷字体大小设置"
      ok-text="确认"
      cancel-text="取消"
      @cancel="closefn"
      @ok="confirm"
    >
      <div class="input">
        <a-radio-group v-model:value="fontValue">
          <a-radio value="small">小号</a-radio>
          <a-radio value="middle">中号</a-radio>
          <a-radio value="large">大号</a-radio>
        </a-radio-group>
      </div>
    </a-modal>
  </div>
</template>
    
    <script setup>
import { ref, onMounted } from "vue";

import { message, Modal, Select, Textarea, Button } from "ant-design-vue";
import { SettingOutlined } from "@ant-design/icons-vue";
import { noticStore } from "@/stores/notic";

// 定义变量
const noticFn = noticStore();
const popupVisible = ref(false);
const fontValue = ref("middle");

//获取系统反馈类型
onMounted(async () => {
  fontValue.value = noticFn.getFontSize();
});

// 显示反馈表单
const showFeedbackForm = () => {
  popupVisible.value = true;
};
const closefn = () => {
  popupVisible.value = false;
};
// 提交反馈
const confirm = () => {
  // 校验
  noticFn.setFontSize(fontValue.value);
  closefn();
};
</script>
    
    <style lang="scss" scoped>
.fedbackContent {
  width: 100%;
  .ant-modal-dialog {
    width: 650px;
  }
  .select {
    width: 98%;
    margin-bottom: 36px;
  }

  .content {
    margin-left: 26px;
    font-size: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}
.input {
  width: 98%;
  margin-bottom: 40px;
  margin-top: 22px;
}
</style>